<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WebGl Solar System</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="three.js" type="text/javascript" ></script>
<script src="orbit.js" type="text/javascript" ></script>
<script>
	var camera,scene,renderer,geometry,material,mesh;
	
	var planets=["sun","mercury","venus","earth","mars","jupiter","saturn","uranus","neptune","pluto"];
	//var planets=["sun"];
	var planetTextures = ["sun.JPG","mercury.JPG","venus.JPG","earth.JPG","mars.jpg","jupiter.JPG","saturn.JPG","uranus.JPG","neptune.JPG","pluto.JPG"];
	var planetRadius=[69.7,0.2439,0.6052,0.6378,0.3398,7.1492,6.0268,2.5559,2.4764,0.1160];
	var planetDistance=[0,5.7190,10.8200,14.9600,22.7940,77.8000,142.9000,287.0990,450.4300,591.3250];
	var planetRotation=[0.005,0.005,0.005,0.005,0.005,0.005,0.005,0.005,0.005,0.005];
	var sphereMeshs=[];
	var controls;
	
	function afterLoad(){
		initScene();
		addPlanets();
		render();		
	}
	
	function initScene(){
		scene=new THREE.Scene();
		//camera=new THREE.PerspectiveCamera(50,(window.innerWidth-20)/(window.innerHeight-20),1,100000);
		camera=new THREE.CombinedCamera( window.innerWidth /2, window.innerHeight/2, 70, 1, 1000, -1000, 1000, 1000 );
		camera.position.z = 1000;
		renderer = new THREE.WebGLRenderer();
		renderer.setSize( window.innerWidth-20, window.innerHeight-20);
		scene.add(camera);
		//controls= new THREE.TrackballControls(camera,renderer.domElement);
		controls= new THREE.OrbitControls(camera,renderer.domElement);
		document.body.appendChild(renderer.domElement);
	}
	
	function render() {
		requestAnimationFrame(render);
		updateRotation();
		controls.update();
        renderer.render(scene,camera);
    }
	
	function addPlanets(){
		var texture;
		var sphereGeometry;
		var sphereMaterial;
		var sphereMesh;
		for(var i=0;i<planets.length;i++){
			texture = THREE.ImageUtils.loadTexture("textures/"+planetTextures[i], {}, function() {
				render();
			});
			texture.needsUpdate = true;
			sphereGeometry = new THREE.SphereGeometry( planetRadius[i], 100, 100);
			sphereMaterial = new THREE.MeshBasicMaterial({map:texture});
			sphereMesh= new THREE.Mesh(sphereGeometry,sphereMaterial);
			sphereMesh.scale.set(1,1,1);
			sphereMesh.position.x = planetDistance[i];
			sphereMeshs.push(sphereMesh);
			scene.add(sphereMesh);
		}
	}
	
	function updateRotation(){
		for(var i=0;i<planets.length;i++){
			sphereMeshs[i].rotation.y += planetRotation[i];			
		}
	}
</script>
</head>

<body onload="afterLoad();">
</body>
</html>